<template>
  <van-pull-refresh v-model="loading" @refresh="uploadDataReq">
    <div class="container">
      <div class="top-view">
        <img class="top-bk-icon" src="../assets/oa_myInfo_nav_bk.png" alt="">
        <div class="user-info">
          <div class="user-info-left">
            <van-image
                width="70"
                height="70"
                round
                lazy-load
                :src="info.headImg"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>加载失败</template>
            </van-image>
          </div>
          <div class="user-info-right">
            <div class="name-position">
              <div class="user-name">{{info.userName}} <span class="user-position">{{info.positionName}}</span></div>
            </div >
            <div class="user-department">{{info.department}}</div>
          </div>
        </div>
        <div class="approve">
          <div class="approve-item" v-for="(item, index) in approveItems" :key="index">
            <div class="approve-item-des">{{item.des}} <span v-if="item.des > 0"></span></div>
            <div class="approve-item-title">{{item.title}}</div>
          </div>
        </div>
      </div>
      <!--icon 标题 描述 向右箭头cell组件 并接收传递的事件-->
      <AppTitleArrowCell :list-items="listItems" v-on:cellClicked="cellClicked" />
    </div>
  </van-pull-refresh>
</template>

<script>
import {Http} from "@/utils/apiManager";
import {getUserInfo} from "@/model/appUser";
import {klGetMyInfo} from "@/utils/urlConfig";
import {showToast} from "vant";
import myInfoIcon from "../assets/my_info_info.png"
import myCollectIcon from "../assets/my_info_collect.png"
import mySetIcon from "../assets/my_info_set.png"
import AppTitleArrowCell from "@/components/appCustom/AppTitleArrowCell";
import router from "@/router";
export default {
  name: "AppMyInfo",
  components: {
    AppTitleArrowCell,
  },
  props: {

  },
  data () {
    return {
      loading:false,
      info:{

      },
      approveItems:[],
      listItems:[
        {
          "data":[
            {
              "title": "我的信息",
              "icon": myInfoIcon,
              "hideArrow": true,
            },
            {
              "title": "我的收藏",
              "icon": myCollectIcon
            },
          ]
        },
        {
          "data":[
            {
              "title": "设置",
              "icon": mySetIcon,
            },
          ]
        }
      ]
    }
  },
  beforeCreate() {

  },
  setup () {

  },
  created() {

  },
  mounted() {
    this.uploadDataReq()
  },
  methods: {
    uploadDataReq() {
      const userInfo = getUserInfo()
      const param = {
        deviceNum:userInfo.uuid,
        userId: userInfo.userId
      }
      Http.post(klGetMyInfo, Http.appModuleType.moduleTypeOA, param).then(res => {
        const { code, data, msg } = res
        if (code == 0) {
          console.log('我的信息', data)
          this.dealDataWithResult(data)
        } else {
          showToast(msg)
        }
      }).catch(err => {
        showToast(err)
        this.loading = false
      })
    },

    dealDataWithResult(result) {
      this.loading = false
      this.info = result

      const mySendItem = {
        title:"我发起的",
        des:result.initiateCount,
      }

      const waitItem = {
        title:"待我审批",
        des:result.approvalCount,
      }

      const copyItem = {
        title:"待我审批",
        des:result.copyCount,
      }
      const arr = [mySendItem, waitItem, copyItem]
      this.approveItems = arr

      showToast("刷新成功")
    },

    cellClicked(item) {
      console.log('事件传递接收者', item.title)

      const title = item.title
      if (title == "设置") {
        router.push('webLayout')
      }
    },
  },
}
</script>

<style scoped>
body, .container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.top-view {
  height: 195px;
  position: relative;
}

.top-bk-icon {
  width: 100%;
  height: 154px;
}

.user-info {
  display: flex;
  position: absolute;
  top:30px;
  left: 15px;
}

.user-info-left {
  margin-right: 15px;
  line-height: 0;
}

.user-info-right {
  margin: auto 0;
}

.name-position {
  display: flex;
  margin: auto 0;
}

.user-name {
  color: white;
  font-size: 18px;
  text-align: left;
  /*400 等同于 normal，而 700 等同于 bold*/
  font-weight: 500;
  line-height: 1;
  margin-right: 6px;
}

.user-position {
  color: #0064E6;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 2px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.85);
}

.user-department {
  margin-top: 10px;
  color: white;
  font-size: 12px;
  text-align: left;
}

/*顶部我发起 待我审批 抄送我的数据*/
.approve {
  position: absolute;
  left: 15px;
  right: 15px;
  height: 67px;
  bottom: 10px;
  background-color: white;
  box-shadow: 0px 0px 30px 0px rgba(2, 88, 207, 0.3);
  border-radius: 15px;
  display: flex;
  flex-flow: row wrap;
}

.approve-item {
  flex:1;
  box-sizing: border-box;
  /*垂直居中*/
  display: block;
  margin: auto 0;
}

.approve-item-des {
  color: #131313;
  /*font-size和line-height搭配使用 则高度显示更加精准 1：1比例*/
  font-size: 20px;
  line-height: 1;
  text-align: center;
  font-weight: 900;
  margin-bottom: 9px;
  position: relative;
}

/*定位实现 在字体右上角显示红点*/
.approve-item-des span {
  display:block;
  background:#f00;
  border-radius:50%;
  width:5px;
  height:5px;
  top:0px;
  right:50px;
  position:absolute;
}

.approve-item-title {
  color: #131313;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.cell  {
  background-color: white;
  display: flex;
  padding: 15px;
  box-sizing: border-box;
  justify-content: space-between;
  border-bottom: 1px solid #f4f5f6;
}

.section {
  margin-bottom: 7px;
}

.cell-left {
  display: flex;
}

.cell-title {
  font-size: 14px;
  color: #131313;
  text-align: left;
  margin-left: 10px;
  margin-left: 10px;
}

.cell-icon {
  width: 20px;
  height: 20px;
  display: block;
  margin: auto 0;
}

</style>
